<template>
    <div>
        <Card>
            <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"/>
            <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="pagesize" :total="total" :current="current" @on-change="changePage"></Page>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
    import Tables from '../../../components/tables'
    import {getUserList} from '../../../api/user'

    export default {
        name: 'user_index',
        components: {
            Tables
        },
        data() {
            return {
                total: 0,
                current: 1,
                pagesize: 1,
                totalPages: 1,
                columns: [
                    {title: '用户id', key: 'uid', sortable: true},
                    {title: '账户', key: 'username', editable: true},
                    {title: '密码', key: 'password'},
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }

                ],
                tableData: [
                    // {
                    //     name: '张三',
                    //     email: '754124441@qq.com',
                    //     createTime: new Date()
                    // },
                    // {
                    //     name: '李四',
                    //     email: '754124441@qq.com',
                    //     createTime: new Date()
                    // },
                    // {
                    //     name: '王五',
                    //     email: '754124441@qq.com',
                    //     createTime: new Date()
                    // },

                ]
            }
        },
        methods: {
            // mock 数据
            // mockTableData() {
            //     let data = [];
            //     for (let i = 0; i < 10; i++) {
            //         data.push({
            //             name: 'Business' + Math.floor(Math.random() * 100 + 1),
            //             email: '123234354@qq.com',
            //             createTime: new Date()
            //         })
            //     }
            //     return data;
            // },
            exportExcel() {
                this.$refs.tables.exportCsv({
                    filename: `table-${(new Date()).valueOf()}.csv`
                })
            },
            show(index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `用户id：${this.tableData[index].uid}<br>账户：${this.tableData[index].username}<br>密码：${this.tableData[index].password}`
                })
            },
            remove(index) {
                this.tableData.splice(index, 1);
            },
            changePage(page) {
                // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
                // this.tableData = this.mockTableData();
                if(page<=this.totalPages){
                    this.current = page;
                };
                this.getUserList(this.current-1,this.pagesize);
            },


            getUserList(page,pageSize){
                getUserList(page,pageSize).then(res=>{
                    this.tableData = res.data.content;
                    this.total = res.data.totalElements;
                    this.totalPages = res.data.totalPages;
                }).catch(err=>{
                    console.log(err);
                })
            },
            handleAdd(){

            }

        },
        mounted() {
            this.getUserList(this.current-1,this.pagesize);
        },
    }
</script>

<style>

</style>
